<!--
 @Author: libing/makeup1122
 @Email: makeup1123@163.com
 @Date: "2020-04-03 13:04:09"
-->
<template>
  <v-container>
    <v-data-table
    dense
    show-select
    v-model='tableSelected'
    :loading='tableLoading'
    :headers='tableHeaders'
    :items='tableItems'
    item-key="tid"
    must-sort
    :options.sync='tableOptions'
    :server-items-length='tableItemsTotal'
    :footer-props='{
      showFirstLastPage: true,
      showCurrentPage: true,
      itemsPerPageOptions: [5, 10, 20 , 50, -1]
    }'>
      <template v-slot:top>
        <v-row dense>
          <v-col cols='12'>
            <v-btn text color='accent' @click='fetchData'><v-icon small>refresh</v-icon>刷新</v-btn>
            <v-btn text color='primary' @click="tableDialog = true"><v-icon small>add</v-icon>新增</v-btn>
            <v-btn text color='error' :disabled='tableSelected.length <= 0' @click='itemDeleteHandle(tableSelected)'><v-icon small>close</v-icon>删除</v-btn>
            <v-divider></v-divider>
          </v-col>
          <v-col cols='9'>
            <v-form ref='searchField'>
              <v-text-field
              dense
              label='请输入搜索内容！'
              hide-details
              prepend-inner-icon='search'
              color='secondary'
              clearable
              solo-inverted
              flat
              v-model='tableSearch'></v-text-field>
            </v-form>
          </v-col>
          <v-col cols='3'>
            <v-btn color='primary' @click='fetchData'><v-icon>search</v-icon>搜索</v-btn>
            <v-btn text @click='$refs.searchField.reset()'><v-icon>refresh</v-icon>重置</v-btn>
          </v-col>
          <v-col cols='12' v-show='tableSelected.length > 0'>
            <span>已选中<span class='primary--text font-weight-black'>{{tableSelected.length}}</span>条记录</span>
          </v-col>
        </v-row>
      </template>
      <template v-slot:item.tid='{ item }'>
        {{item.tid}}
      </template>
      <template v-slot:item.actions='{ item }'>
        <v-tooltip top>
          <template v-slot:activator='{ on }'>
            <!-- <span v-on='on' :id="item.tid">无</span> -->
            <v-btn :disabled='false' v-on='on' @click='itemDeleteHandle([item])' color='red' text small><v-icon>delete</v-icon>删除</v-btn>
          </template>
          <span>无操作</span>
        </v-tooltip>
      </template>
    </v-data-table>
    <v-dialog v-model="tableDialog" persistent>
      <v-card>
        <v-card-title>标签</v-card-title>
        <v-card-text>
          <v-container>
            <v-form ref="dialogForm">
              <v-text-field
                label="名称"
                v-model="formData.name"
                name="name"
                required
                v-validate="'required|max:40'"
                :error-messages="errors.collect('name')"
                data-vv-as="名称"></v-text-field>
              <v-text-field label="别名" v-model="formData.alias"></v-text-field>
            </v-form>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn @click="cancel" :loading="btnLoading" :disabled="btnLoading">取消</v-btn>
          <v-btn @click="submit" :loading="btnLoading" :disabled="btnLoading" color="primary">保存</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>
<script>
import * as API from '@/api/admin/tags.js'
export default {
  name: 'ContentTags',
  components: {},
  data: function () {
    return {
      tableHeaders: [
        { text: 'tid', value: 'tid' },
        { text: '名称', value: 'name' },
        { text: '别称', value: 'alias' },
        // { text: '数量', value: 'count' },
        { text: '时间', value: 'updatedAt' },
        { text: '操作', value: 'actions', align: 'center' }
      ],
      tableLoading: true,
      tableItems: [],
      tableOptions: {
        page: 1,
        itemsPerPage: 20,
        sortBy: [ 'tid' ],
        sortDesc: [ true ]
      },
      tableSearch: '',
      tableSelected: [],
      tableItemsTotal: 0,
      tableDialog: false,
      formData: {},
      btnLoading: false
    }
  },
  created: function () {
  },
  computed: {
    mode: function() {
      return this.formData.hasOwnProperty('tid') ? 'edit' : 'create'
    }
  },
  watch: {
    tableOptions: {
      handler () {
        this.fetchData()
      },
      deep: true
    }
  },
  methods: {
    fetchData() {
      this.tableLoading = true
      API.fetchList({
        sort: this.tableOptions.sortBy[0],
        descending: this.tableOptions.sortDesc[0],
        page: this.tableOptions.page,
        page_size: this.tableOptions.itemsPerPage,
        search: {}
      }).then(res => {
        this.tableItems = res.data.data
        this.tableItemsTotal = res.data.total
      }).finally(() => {
        this.tableLoading = false
      })
    },
    resetBtn: function() {
      this.refs.searchField.reset()
    },
    itemDeleteHandle(items) {
      if (confirm('是否确定删除？删除后无法恢复，请慎重！')) {
        API.deleteOne(items.map(e => e.tid).join('_')).then(res => {
          this.fetchData()
          this.$toasted.success(res.data)
        }).catch(err => {
          return Promise.reject(err)
        })
      }
    },
    cancel() {
      this.$refs.dialogForm.reset()
      this.formData = this.$options.data().formData
    },
    submit() {
      this.$validator.validate().then(result => {
        if (result) {
          this.btnLoading = true
          const submitFunc = this.mode === 'create' ? API.createOne : API.updateOne
          submitFunc(this.formData).then(res => {
            this.$toasted.success(res.data)
            this.tableDialog = false
            this.fetchData()
          }).catch(err => {
            return Promise.reject(err)
          }).finally(() => {
            this.cancel()
            this.btnLoading = false
          })
        }
      })
    }
  }
}
</script>
<style scoped>
</style>
